<script setup lang="ts">
import { ref } from 'vue'
import FoodRecord from './FoodRecord.vue'
import ExerciseRecord from './ExerciseRecord.vue'
import WeightRecord from './WeightRecord.vue'
import { useRoute } from 'vue-router'

interface Filter {
  name: string
}
const route = useRoute()
const filter = ref<Filter>({
  name: '饮食',
})
const getQuery = () => {
  const type = route.query.type

  if (type) {
    filter.value.name = type as string
  }
}
getQuery()
</script>

<template>
  <div class="page-container">
    <el-card>
      <!-- 筛选条件 -->
      <template #header>
        <div class="card-header">
          <el-radio-group v-model="filter.name">
            <el-radio value="饮食" size="large">饮食</el-radio>
            <el-radio value="运动" size="large">运动</el-radio>
            <el-radio value="体重" size="large">体重</el-radio>
          </el-radio-group>
        </div>
      </template>
      <!-- 饮食 -->
      <FoodRecord v-if="filter.name === '饮食'" />
      <!-- 运动 -->
      <ExerciseRecord v-else-if="filter.name === '运动'" />
      <!-- 体重 -->
      <WeightRecord v-else />
    </el-card>
  </div>
</template>

<style scoped lang="less">
.page-container {
  width: 100%;
  height: 100%;
  box-sizing: border-box; /* 确保内边距和边框不会增加元素的总宽度和高度 */
  padding: 20px;

  .card-header {
    display: flex;
    justify-content: center;
    box-sizing: border-box; /* 确保内边距不会增加元素的总宽度和高度 */
  }

  .el-card {
    margin: 10px; /* 添加外边距 */
    box-sizing: border-box; /* 确保外边距不会增加元素的总宽度和高度 */
    height: calc(100% - 20px);
    background-color: rgb(247, 248, 250);
  }
}
</style>
